<template>
	<view>
		<view class="register-pblist">
			<searchBtnVue @search='onSearch' placeholder="请输入医护名"></searchBtnVue>

			<!-- 添加 tabs 组件 -->
			<Tabs :list="tabList" :current="currentTab" @handleChange="handleTabChange"></Tabs>

			<view class="register-pblist-main">
				<view class="doctor-list-main">
					<view v-for="(item,index) in nurseList" :key="index" class="doctor-list-main-item"
						@click="toPage(item)">
						<view class="doctor-list-main-item-box flexR">
							<view class="img">
								<image src="/static/images/hospital/defaultDoctor.png"></image>
							</view>
							<view class="flex-1 align-between">
								<view class="between align-center">
									<view class="flex-1">
										<text class="doctor-name">{{item.nurseName}}</text>
										<text class="job-title">{{item.nurseTitle}}</text>
									</view>
									<view class="bookNum">
										<text class="book-text">预约数量：{{item.bookNum}}</text>
									</view>
									<view>
										<text class="liked" v-if="item.liked">❤</text>
										<text class="no-liked" v-else>♡</text>
									</view>
								</view>
								<view>
									<view class="over-2 doctorSpecialty">{{item.hospitalName + '\t' + item.dept}}</view>
									<view class="over-2 doctorSpecialty">擅长：{{item.skill}}</view>
								</view>
								<view class="starts">
									<text class="star">★</text>
									<text class="star">★</text>
									<text class="star">★</text>
									<text class="star">★</text>
									<text class="star">★</text>
									<text class="star">5.0</text>
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 内容为空 -->
				<view v-if="nurseList.length===0" style="height: 100%;padding-top:10rpx;">
					<view style="background-color: #fff;height: 100%;">
						<u-empty text="暂无排班信息列表" mode="list"></u-empty>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import DateList from '../../../components/DateList/index.vue'
	import searchBtnVue from '../../../components/Search/searchBtn.vue'
	import {
		mapGetters
	} from 'vuex'
	import {
		doctorScheduling
	} from '@/api/doctor.js'
	import dayjs from 'dayjs'
	import {
		doctorNumList
	} from '../../../utils/testDoctorNum'
	import {
		listSitType
	} from '../../../utils/listSitType'
	import Tabs from '../../../components/Tabs/index.vue'
	export default {
		components: {
			DateList,
			searchBtnVue,
			Tabs
		},
		data() {
			return {
				childKey: 1, //用于强制刷新子组件
				pbList: [],
				listSitType: listSitType,
				pbListAll: [],
				allPbDate: null,
				oldPbList: [], //旧的排班数据，直接查询的数据
				deptCode: '',
				doctorCode: '',
				startDate: '',
				endDate: '',
				load: true,
				deptItem: {}, //科室信息
				checked: true,
				haveNum: true, //是否有号源
				name: '', //搜索医生
				nurseList: [], //护士列表
				tabList: [{
						name: '我的关注',
						value: 0
					},
					{
						name: '预约排序',
						value: 1
					},
					{
						name: '评分排序',
						value: 2
					}
				],
				currentTab: 1
			}
		},
		computed: {
			...mapGetters(['hostApi'])
		},
		mounted() {
			this.deptItem = uni.getStorageSync("deptItem")
			// this.getAllDate()
			this.initData()
		},
		methods: {
			handleChange() {
				if (this.checked) {
					this.pbList = this.pbListAll.filter(item => item.schDate == this.startDate && item.waitRegisterTotal !=
						0);
				} else {
					this.pbList = this.pbListAll.filter(item => item.schDate == this.startDate);
				}
			},
			// 只看有号的
			handleCheck() {
				this.checked = !this.checked
				if (this.checked) {
					this.pbList = this.pbListAll.filter(item => item.schDate == this.startDate && item.waitRegisterTotal !=
						0);
				} else {
					this.pbList = this.pbListAll.filter(item => item.schDate == this.startDate);
				}
			},

			initData() {
				let params = {
					queryType: 0,
					deptType: 0,
					sitType: 9, //不穿则查询全天
					supportTimeShare: 1, //是否支持分时
					deptCode: this.deptItem.code,
					doctorCode: this.deptItem.doctorCode,
					endDate: this.endDate,
					beginDate: this.startDate,
					campusCode: this.deptItem.campusCode
				}
				// doctorScheduling(params).then(res => {
				// 	console.log(res)
				// 	if (res.length > 0) {
				// 		res.forEach(item => {
				// 			this.getSitTypeName(item)
				// 		});
				// 		this.pbListAll = res;
				// 	} else {
				// 		// this.pbListAll = doctorNumList;
				// 	}
				// 	this.getAllPbDate(this.pbListAll)
				// }).catch(e => {
				// 	this.load = false
				// 	this.pbListAll = []
				// 	this.pbList = []
				// })

				this.nurseListAll = [{
						nurseName: '韩丽丽',
						nurseCode: '001',
						nurseTitle: '主管护师',
						hospitalName: '四川省成都市郫都中医院',
						dept: '重症医学科',
						skill: '熟练各种护理操作',
						liked: true,
						bookNum: 67,
					},
					{
						nurseName: '张威',
						nurseCode: '003',
						nurseTitle: '护师',
						hospitalName: '四川省成都市郫都中医院',
						dept: '神经内一科',
						skill: '暂无描述',
						liked: false,
						bookNum: 13,
					},
					{
						nurseName: '纪晓苒',
						nurseCode: '002',
						nurseTitle: '主管护师',
						hospitalName: '四川省成都市郫都中医院',
						dept: '儿二科',
						skill: '新生儿系列检测',
						liked: false,
						bookNum: 40,
					},
				]
				this.nurseList = [...this.nurseListAll]
				// 初始化时应用默认的 tab 状态
				this.handleTabChange(this.currentTab)
			},
			// 得到数组里面的所有日期有号源的信息日期
			getAllPbDate(list) {
				let obj = {};
				for (let i = 0; i < list.length; i++) {
					if (!obj[list[i].schDate]) {
						obj[list[i].schDate] = 1
					} else {
						obj[list[i].schDate] = obj[list[i].schDate] + 1
					}
				}
				this.allPbDate = obj
			},
			// 计算每日是否还有号源（未完
			getAllDate() {
				this.endDate = dayjs().add(14, 'day').format('YYYY-MM-DD')
				this.startDate = dayjs().format('YYYY-MM-DD')
				this.initData()
			},
			onDate(val) {
				// 在已经查询的数据去筛选
				this.startDate = val.startDate
				this.endDate = val.endDate
				if (this.name) {
					this.pbList = this.pbListAll.filter(item => item.schDate == this.startDate && item.doctorName.includes(
						this.name));
				} else {
					this.pbList = this.pbListAll.filter(item => item.schDate == this.startDate);
				}
			},
			onSearch(val) {
				this.name = val;
				// 重新应用当前的 tab 过滤和搜索过滤
				this.handleTabChange(this.currentTab);
			},
			toPage(item) {
				// if (item.waitRegisterTotal == 0) {
				// 	uni.showToast({
				// 		title: '当前无可预约号源',
				// 		icon: 'none',
				// 		duration: 2000
				// 	})
				// } else {
				// 需要得到当前医生所有的排班数据
				// let doctorList = this.pbListAll.filter(val => val.doctorCode == item.doctorCode)
				// let obj = {};
				// for (let i = 0; i < doctorList.length; i++) {
				// 	if (!obj[doctorList[i].schDate]) {
				// 		obj[doctorList[i].schDate] = 1
				// 	} else {
				// 		obj[doctorList[i].schDate] = obj[doctorList[i].schDate] + 1
				// 	}
				// }
				// this.getAllPbDate(doctorList); //将当前医生的所有排班信息传递到医生页面
				// uni.setStorageSync("allPbDate", obj);
				// uni.setStorageSync("doctorCode", item.doctorCode);
				// uni.setStorageSync("doctorList", doctorList);
				// console.log(item)
				uni.navigateTo({
					url: `/pages/Home/ServeComposite/NursingInfo?code=` + item.nurseCode
				})
				// }
			},
			getSitTypeName(e) {
				listSitType.forEach(item => {
					if (item.type == parseInt(e.sitType)) {
						return e.sitTypeName = item.name
					}
				})
				return 1
			},
			handleTabChange(index) {
				this.currentTab = index;
				let filteredList = [...this.nurseListAll];

				if (index === 0) {
					// 我的关注：显示已关注的护士
					filteredList = this.nurseListAll.filter(item => item.liked);
				} else if (index === 1) {
					// 预约排序：按预约数量降序排列
					filteredList = this.nurseListAll.sort((a, b) => b.bookNum - a.bookNum);
				} else if (index === 2) {
					// 评分排序：按评分降序排列（这里暂时用预约数量代替，实际应该有评分字段）
					filteredList = this.nurseListAll.sort((a, b) => b.bookNum - a.bookNum);
				}

				// 如果当前有搜索关键词，需要同时应用搜索过滤
				if (this.name) {
					filteredList = filteredList.filter(item => item.nurseName.includes(this.name));
				}

				this.nurseList = filteredList;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.have-num {
		display: flex;
		justify-content: flex-start;


		.time {
			border: 1px solid rgb(93, 210, 177);
			color: rgb(93, 210, 177);
			padding: 2px 10px;
			border-radius: 10px 0 0 10px;
		}

		.num {
			background-color: rgb(93, 210, 177);
			color: white;
			padding: 2px 10px;
			border-radius: 0 10px 10px 0;
		}
	}

	.no-num {
		display: flex;
		justify-content: flex-start;


		.time {
			border: 1px solid rgb(255, 158, 73);
			color: rgb(255, 158, 73);
			padding: 2px 10px;
			border-radius: 10px 0 0 10px;
		}

		.num {
			background-color: rgb(255, 158, 73);
			color: white;
			padding: 2px 10px;
			border-radius: 0 10px 10px 0;
		}
	}

	.doc-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 10px;
	}

	.bookNum {
		margin-right: 32rpx;
	}

	.book-text {
		font-weight: 400;
		font-size: 28rpx;
	}

	.doctor-name {
		font-weight: bold;
		font-size: 32rpx;
	}

	.liked {
		color: #f00;
	}

	.job-title {
		color: gray;
		margin: 0 10px;
		font-size: 10px;
	}

	.doctorSpecialty {
		font-size: 12px;
	}

	.register-pblist {
		// padding: 24upx 32upx;

		.register-pblist-main {
			// 110rpx 搜索框宽度 120 时间列表宽度 4 是弹性
			height: calc(100vh - 110rpx - 120rpx - 180rpx);
			overflow: scroll;
			margin-top: 16rpx;

			.register-pblist-main-item {
				background-color: $uni-bg-color;
				margin-top: 10rpx;
				padding: 40rpx 0 30rpx 0;
				position: relative;
			}
		}
	}

	// 自定义 tabs 样式
	:deep(.tabs) {
		background-color: #fff;
		margin: 0 16rpx;
		border-radius: 16rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);

		.tab {
			font-size: 28rpx;
			color: #666;
			font-weight: 400;

			&:first-child {
				border-radius: 16rpx 0 0 16rpx;
			}

			&:last-child {
				border-radius: 0 16rpx 16rpx 0;
			}

			&.active {
				color: #1ec6e6;
				font-weight: 600;
			}
		}
	}
</style>

<style lang="scss" scoped>
	.doctor-list-main-item {
		background-color: transparent;
		padding-bottom: 24rpx;
		margin: 0 16rpx;

		.star {
			color: #FFB300;
			font-size: 24upx;
			margin-right: 8upx;
		}

		.doctor-list-main-item-box {
			background-color: $uni-bg-color;
			padding: 24rpx 24rpx;
			border-radius: 32rpx;

			>.img {
				width: 70px;
				height: 70px;
				overflow: hidden;
				margin-right: 30rpx;

				>image {
					width: 70px;
					height: 70px;
					border-radius: 8upx;
				}
			}

			>.doctor-list-main-item-right {
				flex: 1;

				>view {
					margin-bottom: 10upx;
				}

				.doctor-list-main-item-right-title {
					height: 40rpx;
					line-height: 40rpx;
					font-size: 28rpx;
					color: #000000;
					justify-content: space-between;
					font-weight: bold;
					margin-bottom: 10rpx;

					>.title-left {
						.name {
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 32upx;
							color: rgba(0, 0, 0, 0.7);
						}

						.tag {
							// font-size: 24rpx;
							// font-weight: 100;
							// color: $text-color;
							// background-color: $tag-color;
							// height: 36rpx;
							// line-height: 36rpx;
							// padding: 7rpx 17rpx;
							// border-radius: 5rpx;
							// margin-left: 10rpx;

							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24upx;
							color: rgba(0, 0, 0, 0.4);
							margin-left: 16upx;
						}
					}

					.right {
						width: 160upx;
						float: right;
						// padding: 0 32upx;
						background-color: #FFF;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24upx;
						color: $theme-color;
						border: 1px solid $theme-color;
						border-radius: 8upx;
						transform: translateY(-10upx);
						text-align: center;
					}
				}

				>.row {
					>text {
						// color: $theme-color-light;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24upx;
						color: rgba(0, 0, 0, 0.7);
					}
				}

				.sc {
					// height: 40px;
					// line-height: 20px;
					// font-size: 12px;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 20upx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box; // 作为弹性伸缩盒子模型显示。
					-webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式--从上到下垂直排列
				}

				.num {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 20upx;

					>text {
						&:nth-child(1) {
							color: #FFAA32;
						}

						&:nth-child(2) {
							color: #5DD2B1;
							margin-left: 20upx;
						}

						&:nth-child(3) {
							color: #FF7F7F;
							margin-left: 20upx;
						}
					}

				}
			}
		}
	}
</style>